@<template>
  <div class="cart-item">
    <scroll ref="cartscroll" class="cart-scroll">
      <div >
        <div class="erveryone"  v-for="(item, index) in goodsList" :key="index">
          <div>
              <check-button v-if="goodsList.length!=0" @click.native="chose(item)" :checked="item.check" />
          </div>
          <div class="item-img">
            <img :src="item.image" alt="商品图片" />
          </div>
          <div class="item-text"  @click="goDetail(item)">
            <div>{{ item.title }}</div>
            <div>{{ item.desc }}</div>
            <div class="item-number">
              <div>￥{{ item.price }}</div>
              <div>X{{ item.count }}</div>
            </div>
          </div>
        </div>
      </div>
 
    </scroll>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import Scroll from "components/common/scroll/Scroll.vue";
import CheckButton from 'components/content/checkbutton/CheckButton.vue'
export default {
  name:"CartItem",
  data(){
      return{
          tochange: false
      }
  },
  computed: {
    ...mapGetters(["goodsList"]),
    check(){

    }
  },
  components: {
    Scroll,
    CheckButton,
  },
  methods: {
      goDetail(item) {
        this.$router.push('/detail/'+ item.iid)
      },
      chose(item){
        //   item.check = !(item.check)

        //通过官方推荐步骤修改数据
          this.$store.dispatch('chose',item.iid)
          
      }
  },
  activated(){
      this.$refs.cartscroll.refresh();
  }
};
</script>

<style scoped>
.cart-item {
  /* height: 100%; */
  height: calc(100% - 44px - 79px);
}
.cart-scroll {
  /* height: 100vh - 44px; */
  /* height: calc(100% - 100px); */
  overflow: hidden;
  height: 100%;
}
.erveryone {
  display: flex;
  height: 100px;
  padding: 10px 10px 10px 2px;
  border-top: 1px solid #ebf0f4;
  border-bottom: 1px solid #ebf0f4;
  position: relative;
  align-items: center;
}
.erveryone div:nth-of-type(1) {
    /* margin-top: 15px;     */
    /* position:absolute; */
    left: 0;
    top: 10px;
}
.item-img {
    margin: 0 10px 0 2px;
}
.item-img img{
    height:90px;
    margin-top: -5px;
    
}
.item-text {
    white-space: nowrap;
    
    text-overflow: ellipsis;
    overflow: hidden;
}
.item-text div:nth-of-type(1) {
    font-size: 14px;
    white-space: nowrap;
    
    
    text-overflow: ellipsis;
    overflow: hidden;
}
.item-text div:nth-of-type(2) {
    font-size: 10px;
     white-space: nowrap;
     margin: 10px 0;
    
    text-overflow: ellipsis;
    overflow: hidden;
}
.item-number {
    display: flex;
    justify-content: space-between;
    
    line-height: 15px;
    margin-top: 15px;
}
.item-number div:nth-of-type(1){
    color: orange;
    margin-top: 10px;
}
</style>